<script setup>
import {
  Delete,
  Edit,
} from "@element-plus/icons-vue";
import {
  coursePageListService,
  courseTypeListService,
  courseAddService,
  courseUpdateService,
  courseDeleteService,
  getChapterTreeByCourseIdService,
  insertChapterService,
  updateChapterService,
  deleteChapterService,
  courseBatchDeleteService,
  expCourseServer,
} from "@/api/course.js";
import { ref, onMounted, nextTick } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import E from "wangeditor"
import axios from "axios";

const editor = ref(null);

import { useTokenStore } from '@/stores/token'; // 根据实际情况调整路径
const tokenStore = useTokenStore();
const avatar = ref('path/to/default/avatar.png'); // 替换为默认图片的路径
// 控制模态框是否显示
const showModal = ref(false);
// 选中的章节
const selectedChapter = ref({});
const openModal = (chapter) => {
  // 深拷贝 chapter 对象，避免直接修改原始对象
  const newChapter = { ...chapter };
  // 确保 content 属性存在且为字符串
  newChapter.content = typeof newChapter.content === 'string' ? newChapter.content : '';

  selectedChapter.value = newChapter;
  showModal.value = true;
  console.log(chapter);

  // 初始化编辑器
  nextTick(() => {
    initWangEditor(selectedChapter.value.content);
  });
};

const initWangEditor = (content) => {
  if (!editor.value) {
    editor.value = new E('#editor');
    editor.value.config.placeholder = '请输入内容';
    editor.value.config.uploadFileName = 'file';
    editor.value.config.uploadImgServer = 'http://localhost:8080/wang/upload';
    editor.value.config.customUploadVideo = function (resultFiles, insertVideoFn) {
      // resultFiles 是 input 中选中的文件列表
      // insertVideoFn 是获取视频 url 后，插入到编辑器的方法
      const formData = new FormData();
      formData.append('videoFile', resultFiles[0]);

      axios.post('http://localhost:8080/video/wang/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      })
      .then(response => {
        console.log('Response:', response);
        if (response.data.errno === 0) {
          const videoUrl = response.data.data[0].url;
          insertVideoFn(videoUrl); // 将视频链接传递给 wangEditor
        } else {
          ElMessage.error(response.data.message || "上传失败");
        }
      })
      .catch(error => {
        ElMessage.error(error.message || "上传失败");
      });
    };
    editor.value.create();
  }

  // 确保 content 是字符串
  editor.value.txt.html(typeof content === 'string' ? content : '');
};

// 关闭模态框
const closeModal = () => {
  showModal.value = false;

};


const submitChapterContent = async () => {
  editor.value.txt.html();
  try {
    const chapterData = {
      id: selectedChapter.value.id,
      content: editor.value.txt.html()
      // 其他需要更新的字段
    };
    const result = await updateChapterService(chapterData);
    ElMessage.success(result.message ? result.message : "更新成功");
    closeModal(); // 关闭模态框
    // 刷新章节数据
  } catch (error) {
    ElMessage.error(error.message ? error.message : "更新失败");
  }
  
};



// 课程分类数据模型
const categorys = ref([]);

// 用户搜索时选中的分类id
const categoryId = ref("");
// 用户搜索时的关键字
const input = ref("");
// 课程列表数据模型
const coursePageList = ref([]);

// 分页条数据模型
const pageNum = ref(1); // 当前页
const total = ref(20); // 总条数
const pageSize = ref(10); // 每页条数

// 当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
  pageSize.value = size;
  getcoursePageList();
};

// 当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
  pageNum.value = num;
  getcoursePageList();
};

// 回显课程分类
const getCourseCategoryList = async () => {
  let result = await courseTypeListService();
  categorys.value = result.data;
};

// 获取课程列表数据
const getcoursePageList = async () => {
  // 设置查询参数
  let params = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    // 有值就传，否则null
    typeId: categoryId.value ? categoryId.value : null,
    name: input.value ? input.value : null,
  };
  let result = await coursePageListService(params);
  // 渲染课程列表数据
  coursePageList.value = result.data.items;
  total.value = result.data.total;
  // 扩展课程分类名称
  for (let i = 0; i < coursePageList.value.length; i++) {
    let item = coursePageList.value[i];
    for (let j = 0; j < categorys.value.length; j++) {
      if (item.courseCategoriesId == categorys.value[j].id) {
        item.courseCategoriesName = categorys.value[j].name;
        break;
      }
    }
  }
};



// 控制抽屉是否显示
const visibleDrawer = ref(false);
// 添加课程表单数据模型
const courseModel = ref({
  courseName: "",
  courseDescription: "",
  courseCategoriesId: "",
  courseType:"",
  teacherName: "",
  price: "",
  picture: "",
  chapters: [], // 章节信息

});
// 上传成功后的处理逻辑
const uploadSuccess = (response) => {
  if (response.code === 0) {
    console.log(response);
    courseModel.value.picture = response.data; // 将封面URL保存到课程模型中
    ElMessage.success('上传成功');
  } else {
    ElMessage.error('上传失败');
  }
};

// 控制按钮是创建还是修改
const isAdd = ref(true);

const handleCategoryChange = (id) => {
  const selectedCategory = categorys.value.find(c => c.id === id);
  if (selectedCategory) {
    courseModel.value.courseType = selectedCategory.name;
  }
};
// 课程添加请求
const courseAdd = async () => {
  let result = await courseAddService(courseModel.value);
  ElMessage.success(result.message ? result.message : "添加成功");
  visibleDrawer.value = false;
  getcoursePageList();
  clearCourseModel();
};

// 课程修改请求
const courseUpdate = async () => {
  let result = await courseUpdateService(courseModel.value);
  ElMessage.success(result.message ? result.message : "修改成功");
  visibleDrawer.value = false;
  getcoursePageList();
};

// 显示修改课程表单
const showUpdateDialog = (row) => {
  // 设置添加还是修改
  isAdd.value = false;
  // 回显数据
  courseModel.value = row;
  // 显示抽屉
  visibleDrawer.value = true;
  currentPage.value = 1; // 确保每次打开抽屉时显示第一页
};
// 显示内容对话框
const showContentDialog = async (row) => {
  try {
    // 设置添加还是修改
    isAdd.value = false;
    // 获取课程详细信息，包括子章节
    courseModel.value = {
      ...row,
      chapters: row.chapters || [], // 确保 chapters 是一个数组
    };

    // 获取课程章节树
    let chapterResult = await getChapterTreeByCourseIdService(row.courseId);
    let chaptersData = chapterResult.data || [];

    // 判断是否有章节数据
    if (chaptersData.length === 0) {
      // 如果没有章节数据，设置为添加模式
      isAdd.value = true;
      courseModel.value.chapters = []; // 清空章节数据
    } else {
      // 如果有章节数据，设置为修改模式
      isAdd.value = false;

      // 转换章节数据格式
      let chapters = [];
      chaptersData.forEach((chapter) => {
        let parentChapter = {
          id: chapter.id,
          name: chapter.name,
          children: [],
        };
        if (chapter.subChapters && chapter.subChapters.length > 0) {
          chapter.subChapters.forEach((subChapter) => {
            parentChapter.children.push({
              id: subChapter.id,
              name: subChapter.name,
              content: subChapter.content,
            });
          });
        }
        chapters.push(parentChapter);
      });

      // 将转换后的数据赋值给 courseModel.value.chapters
      courseModel.value.chapters = chapters;
    }

    // 显示抽屉
    visibleDrawer.value = true;
    currentPage.value = 3; // 显示第三页
  } catch (error) {
    ElMessage.error(error.message ? error.message : "获取课程信息失败");
  }
};

// 显示添加课程表单
const showAddDialog = () => {
  // 清空表单数据
  clearCourseModel();
  // 设置添加还是修改
  isAdd.value = true;
  // 显示抽屉
  visibleDrawer.value = true;
  currentPage.value = 1; // 确保每次打开抽屉时显示第一页
};

// 删除课程
const courseDelete = async (id) => {
  // 弹窗提示
  let result = await ElMessageBox.confirm("确定删除吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  });
  // 调用接口
  result = await courseDeleteService(id);
  // 提示
  ElMessage.success(result.message ? result.message : "删除成功");
  getcoursePageList();
};


// 当前页码
const currentPage = ref(1);

// 上一页
const prevPage = () => {
  currentPage.value = 1;
};

// 提交章节表单
const submitChapterForm = async () => {
  ElMessage.success("正在提交...");
  try {
    // 遍历所有章节和子章节，发送添加请求
    for (let chapter of courseModel.value.chapters) {
      // 添加父章节
      let parentChapterData = {
        courseId: courseModel.value.courseId, // 确保包含 courseId
        name: chapter.name,
        parentId: -1,
      };
      let parentResult = await insertChapterService(parentChapterData);
      if (parentResult.code !== 0) {
        ElMessage.error(parentResult.code);
        throw new Error(parentResult.msg || "添加父章节失败0");
      }

      // 更新父章节的 id
      chapter.id = Number(parentResult.data); // 确保 id 是 Number 类型

      // 添加子章节
      for (let child of chapter.children) {
        let childChapterData = {
          courseId: courseModel.value.courseId, // 确保包含 courseId
          parentId: chapter.id, // 父章节的 id
          name: child.name,
        };
        let childResult = await insertChapterService(childChapterData);
        if (childResult.code !== 0) {
          throw new Error(childResult.msg || "添加子章节失败1");
        }

        // 更新子章节的 id
        child.id = Number(childResult.data.id); // 确保 id 是 Number 类型
      }
    }

    // 提示成功
    ElMessage.success("章节添加成功");
    // 关闭抽屉
    visibleDrawer.value = false;
    // 刷新章节数据
    showChapterDialog(courseModel.value);
  } catch (error) {
    ElMessage.error(error.message ? error.message : "添加章节失败2");
  }
};

// 提交修改表单
const updateForm = async () => {
  try {
    // 遍历所有章节和子章节，发送添加或更新请求
    for (let chapter of courseModel.value.chapters) {
      if (chapter.isNew) {
        // 添加父章节
        let parentChapterData = {
          courseId: courseModel.value.courseId, // 确保包含 courseId
          name: chapter.name,
          parentId: -1,
        };
        let parentResult = await insertChapterService(parentChapterData);
        if (parentResult.code !== 0) {
          ElMessage.error(parentResult.code);
          throw new Error(parentResult.msg || "添加父章节失败");
        }
        // 更新父章节的 id 和 isNew 标记
        chapter.id = Number(parentResult.data); // 确保 id 是 Number 类型
        chapter.isNew = false; // 设置 isNew 为 false
      } else if (chapter.id) {
        // 更新父章节
        let parentChapterData = {
          id: chapter.id, // 确保包含章节 id
          courseId: courseModel.value.courseId, // 确保包含 courseId
          name: chapter.name,
          parentId: -1,
        };
        let parentResult = await updateChapterService(parentChapterData);
        if (parentResult.code !== 0) {
          ElMessage.error(parentResult.code);
          throw new Error(parentResult.msg || "更新父章节失败");
        }
      }

      // 处理子章节
      for (let child of chapter.children) {
        if (child.isNew) {
          // 添加子章节
          let childChapterData = {
            courseId: courseModel.value.courseId, // 确保包含 courseId
            parentId: chapter.id, // 父章节的 id
            name: child.name,
          };
          let childResult = await insertChapterService(childChapterData);
          if (childResult.code !== 0) {
            throw new Error(childResult.msg || "添加子章节失败");
          }
          // 更新子章节的 id 和 isNew 标记
          child.id = Number(childResult.data.id); // 确保 id 是 Number 类型
          child.isNew = false; // 设置 isNew 为 false
        } else if (child.id) {
          // 更新子章节
          let childChapterData = {
            id: child.id, // 确保包含子章节 id
            courseId: courseModel.value.courseId, // 确保包含 courseId
            parentId: chapter.id, // 父章节的 id
            name: child.name,
          };
          let childResult = await updateChapterService(childChapterData);
          if (childResult.code !== 0) {
            throw new Error(childResult.msg || "更新子章节失败");
          }
        }
      }
    }

    // 提示成功
    ElMessage.success("章节更新成功");
    // 关闭抽屉
    visibleDrawer.value = false;
    // 刷新章节数据
    showChapterDialog(courseModel.value);
  } catch (error) {
    ElMessage.error(error.message ? error.message : "更新章节失败");
  }
};
const showChapterDialog = async (row) => {
  // 先把章节数据清空
  courseModel.value.chapters = [];
  try {
    // 设置添加还是修改
    isAdd.value = false;
    // 获取课程详细信息，包括子章节
    courseModel.value = {
      ...row,
      chapters: row.chapters || [], // 确保 chapters 是一个数组
    };

    // 获取课程章节树
    let chapterResult = await getChapterTreeByCourseIdService(row.courseId);
    let chaptersData = chapterResult.data || [];

    // 判断是否有章节数据
    if (chaptersData.length === 0) {
      // 如果没有章节数据，设置为添加模式
      isAdd.value = true;
      courseModel.value.chapters = []; // 清空章节数据
    } else {
      // 如果有章节数据，设置为修改模式
      isAdd.value = false;

      // 转换章节数据格式
      let chapters = [];
      chaptersData.forEach((chapter) => {
        let parentChapter = {
          id: chapter.id,
          name: chapter.name,
          children: [],
        };
        if (chapter.subChapters && chapter.subChapters.length > 0) {
          chapter.subChapters.forEach((subChapter) => {
            parentChapter.children.push({
              id: subChapter.id,
              name: subChapter.name,
            content: subChapter.content 
            });
          });
        }
        chapters.push(parentChapter);
      });

      // 将转换后的数据赋值给 courseModel.value.chapters
      courseModel.value.chapters = chapters;
    }

    // 显示抽屉
    visibleDrawer.value = true;
    currentPage.value = 2; // 显示第二页
  } catch (error) {
    ElMessage.error(error.message ? error.message : "获取课程信息失败");
  }
};
// 删除父章节
const deleteParentChapter = async (parentId) => {
  const parentChapter = courseModel.value.chapters.find(
    (chapter) => chapter.id === parentId
  );

  if (parentChapter) {
    if (parentChapter.id) {
      // 弹窗提示
      let result = await ElMessageBox.confirm(
        "确定删除该父章节及其所有子章节吗？",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      );

      if (result === "confirm") {
        // 删除所有子章节
        for (let child of parentChapter.children) {
          if (child.id) {
            // 发送删除请求
            await deleteChapterService(child.id);
          }
        }

        // 发送删除父章节请求
        await deleteChapterService(parentChapter.id);

        // 从本地数据中删除
        courseModel.value.chapters = courseModel.value.chapters.filter(
          (chapter) => chapter.id !== parentId
        );
      }
    } else if (parentChapter.isNew) {
      // 直接删除所有子章节
      parentChapter.children = [];

      // 从本地数据中删除
      courseModel.value.chapters = courseModel.value.chapters.filter(
        (chapter) => chapter.id !== parentId
      );
    }
  }
};

// 删除子章节
const deleteChildChapter = async (parentId, childId) => {
  const parentChapter = courseModel.value.chapters.find(
    (chapter) => chapter.id === parentId
  );

  if (parentChapter) {
    const childChapter = parentChapter.children.find(
      (child) => child.id === childId
    );

    if (childChapter) {
      if (childChapter.id) {
        // 弹窗提示
        let result = await ElMessageBox.confirm(
          "确定删除该子章节吗？",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        );

        if (result === "confirm") {
          // 发送删除请求
          await deleteChapterService(childChapter.id);
          // 从本地数据中删除
          parentChapter.children = parentChapter.children.filter(
            (child) => child.id !== childId
          );
        }
      } else if (childChapter.isNew) {
        // 直接删除
        parentChapter.children = parentChapter.children.filter(
          (child) => child.id !== childId
        );
      }
    }
  }
};

// 添加父章节
const addParentChapter = () => {
  courseModel.value.chapters.push({
    id: Date.now(), // 使用时间戳作为临时ID
    name: "",
    children: [],
    isNew: true, // 添加 isNew 标记
  });
};

// 添加子章节
const addChildChapter = (parentId) => {
  const parentChapter = courseModel.value.chapters.find(
    (chapter) => chapter.id === parentId
  );
  if (parentChapter) {
    parentChapter.children.push({
      id: Date.now(), // 使用时间戳作为临时ID
      name: "",
      isNew: true, // 添加 isNew 标记
    });
  }
};

// 清空添加课程表单数据
const clearCourseModel = () => {
  courseModel.value = {
    courseName: "",
    courseDescription: "",
    courseCategoriesId: "",
    teacherName: "",
    chapters: [], // 确保 chapters 是一个数组
  };
};
const multipleSelection = ref([]);// 多选数据
const handleSelectionChange = (val) => {
  multipleSelection.value = val;
};


const delBatch = async () => {
  if (multipleSelection.value.length === 0) {
    ElMessage.warning("请选择要删除的数据");
    return;
  }

  ElMessageBox.confirm("确定要删除吗？", "提示", {
    type: "warning",
  })
    .then(async () => {
      let result = await courseBatchDeleteService(multipleSelection.value);
      ElMessage.success(result.msg ? result.msg : "删除成功");
      getcoursePageList();
    })
    .catch(() => {});
};


// 文件输入框引用
const dialogVisible = ref(false);
const inputFile = ref();

// 触发文件选择对话框
const handleImportClick = () => {
  dialogVisible.value = true;
};




//导出报表函数
const exp = async () => {
  let result = await expCourseServer();
  ElMessage.success(result.msg ? result.msg : "下载成功");
}

import { useRouter } from 'vue-router';

const router = useRouter();

const goToComments = (courseId) => {
  router.push({ name: 'CourseCMTManage', params: { courseId } });
};
onMounted(() => {
  getCourseCategoryList();
  getcoursePageList();
});
</script>

<template>
  <el-card class="page-container transparent-card">
    <template #header>
      <div class="header">
        <div class="extra">
          <el-button type="primary" @click="showAddDialog()">添加课程</el-button>
          <el-button type="danger" @click="delBatch()">批量删除</el-button>
          <el-button type="success" @click="exp()">导出报表</el-button>
          <el-button type="primary" @click="handleImportClick">导入excel</el-button>
        </div>
      </div>
    </template>
    <!-- 搜索表单 -->
    <el-form inline>
      <el-form-item label="课程分类：">
        <el-select placeholder="请选择" v-model="categoryId">
          <el-option v-for="c in categorys" :key="c.id" :label="c.name" :value="c.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-input v-model="input" style="width: 240px" placeholder="请输入课程名" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getcoursePageList">搜索</el-button>
        <el-button @click="categoryId = '';input = '';">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 文章列表 -->
    <el-table :data="coursePageList" style="width: 100%" @selection-change="handleSelectionChange" ref="table"
      :row-key="row => row.courseId">
      <el-table-column width="100" type="selection" :reserve-selection="true"> </el-table-column>
      <el-table-column label="课程名" width="400" prop="courseName"></el-table-column>
      <el-table-column label="课程分类" prop="courseCategoriesName"></el-table-column>
      <el-table-column label="课程描述" prop="courseDescription"></el-table-column>
      <el-table-column label="老师姓名" prop="teacherName"></el-table-column>
      <el-table-column label="价格" prop="price"></el-table-column>
      <el-table-column label="创建时间" prop="createTime"></el-table-column>
      <el-table-column label="修改时间" prop="updateTime"></el-table-column>
      <el-table-column label="操作" width="400">
        <template #default="{ row }">
          <el-button :icon="Edit" circle plain type="primary" @click="showUpdateDialog(row)"></el-button>
          <el-button :icon="Delete" circle plain type="danger" @click="courseDelete(row.courseId)"></el-button>
          <el-button type="primary" @click="showChapterDialog(row)">章节</el-button>
          <el-button type="primary" @click="showContentDialog(row)">内容</el-button>
          <el-button type="primary" @click="goToComments(row.courseId)">评论</el-button>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="没有数据" />
      </template>
    </el-table>
    <!-- 分页条 -->
    <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[3, 5, 10, 15]"
      layout="jumper, total, sizes, prev, pager, next" background :total="total" @size-change="onSizeChange"
      @current-change="onCurrentChange" style="margin-top: 20px; justify-content: flex-end" />

    <!-- 抽屉 -->
    <el-drawer v-model="visibleDrawer" title="课程基本信息" direction="rtl" size="50%">
      <div v-if="currentPage === 1">
        <el-form :model="courseModel" label-width="100px">
          <el-form-item label="课程名称">
            <el-input v-model="courseModel.courseName" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="课程分类">
            <el-select placeholder="请选择" v-model="courseModel.courseCategoriesId" @change="handleCategoryChange">
              <el-option v-for="c in categorys" :key="c.id" :label="c.name" :value="c.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="描述">
            <el-input v-model="courseModel.courseDescription" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="创建老师姓名">
            <el-input v-model="courseModel.teacherName" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="价格">
            <el-input v-model="courseModel.price" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="封面">
            <el-upload ref="uploadRef" class="avatar-uploader" :show-file-list="false" :auto-upload="true"
              action="/api/upload" name="file" :headers="{ 'Authorization': tokenStore.token }"
              :on-success="uploadSuccess">
              
              <img v-if="courseModel.picture" :src="courseModel.picture"  class="avatar"  />
              <img v-else :src="avatar" width="278"  height="278" />
            </el-upload>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="isAdd ? courseAdd() : courseUpdate()">{{ isAdd ? "提交" : "修改"}}</el-button>
            <el-button type="info" @click="closeDrawer">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div v-else-if="currentPage === 2">
        <h1>课程章节内容</h1>
        <!-- 章节表单 -->
        <el-form :model="courseModel" label-width="100px">
          <div v-for="(chapter, chapterIndex) in courseModel.chapters" :key="chapter.id" class="chapter">
            <el-form-item :label="`父章节 ${chapterIndex + 1}`">
              <el-input v-model="chapter.name" placeholder="请输入父章节名称"></el-input>
              <el-button type="danger" @click="deleteParentChapter(chapter.id)">删除父章节</el-button>
            </el-form-item>
            <div v-for="(child, childIndex) in chapter.children" :key="child.id" class="sub-chapter">
              <el-form-item :label="`${chapterIndex + 1}.${childIndex + 1}`">
                <el-input v-model="child.name" placeholder="请输入子章节名称" style="width: 70%; margin-right: 10px"></el-input>
                <el-button type="danger" :icon="Delete" @click="deleteChildChapter(chapter.id, child.id)" circle />
              </el-form-item>
            </div>
            <el-button type="primary" @click="addChildChapter(chapter.id)">添加子章节</el-button>
          </div>
          <el-button type="primary" @click="addParentChapter">添加父章节</el-button>
        </el-form>
        <el-form-item>
          <el-button type="primary" @click="isAdd ? submitChapterForm() : updateForm()">{{ isAdd ? "创建章节" : "修改章节"
            }}</el-button>
          <el-button type="info" @click="prevPage">上一页</el-button>
        </el-form-item>
      </div>
      <div v-else-if="currentPage === 3">
        <!-- 第三页内容 -->
        <h1>课程章节内容</h1>
        <div class="chapter-container">
          <div v-for="(chapter, chapterIndex) in courseModel.chapters" :key="chapter.id" class="chapter">
            {{ chapter.name }}
            <ul>
              <li v-for="(child, childIndex) in chapter.children" :key="child.id" class="sub-chapter"
                @click="openModal(child)">
                {{ child.name }}

              </li>
            </ul>
          </div>
        </div>
      </div>
    </el-drawer>
    <!-- 导入对话框 -->
    <el-dialog v-model="dialogVisible" title="导入Excel文件" width="30%">
      <el-upload ref="upload" action="" :auto-upload="false" :on-change="handleFileChange" :file-list="inputFile"
        accept=".xlsx, .xls" :show-file-list="true">
        <template #trigger>
          <el-button type="primary">选取文件</el-button>
        </template>
        <el-button type="success" @click="uploadCourseFile()">上传文件</el-button>
      </el-upload>
    </el-dialog>
  </el-card>


  <!-- 模态框 -->
  <el-dialog v-model="showModal" title="章节内容" width="50%">
    <div style="display: flex; justify-content: center;">
      <div id="editor" style="width: 70%;"></div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="submitChapterContent">提交</el-button>
        <el-button @click="closeModal">取消</el-button>
      </span>
    </template>
  </el-dialog>

</template>

<style lang="scss" scoped>
.page-container {
  min-height: 100%;
  box-sizing: border-box;
}

.transparent-card {
  background-color: rgba(255, 255, 255, 0.8); /* 半透明白色背景 */
  backdrop-filter: blur(0px); /* 模糊效果 */
  border-radius: 4px; /* 圆角 */
  padding: 20px; /* 内边距 */
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.el-select {
  width: 200px;
}

/* 抽屉样式 */
.avatar-uploader {
  :deep() {
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }

    .el-upload {
      border: 1px dashed var(--el-border-color);
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: var(--el-transition-duration-fast);
    }

    .el-upload:hover {
      border-color: var(--el-color-primary);
    }

    .el-icon.avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      text-align: center;
    }
  }
}

.editor {
  width: 100%;
  :deep(.ql-editor) {
    min-height: 200px;
  }
}

/* 顶部菜单样式 */
.el-menu-demo {
  margin-bottom: 20px;
}

/* 章节样式 */
.chapter {
  margin-bottom: 20px;
  padding: 10px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  background-color: #f9fafc;
}

.sub-chapter {
  margin-left: 20px;
  margin-bottom: 10px;
  padding: 5px 10px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  background-color: #ffffff;
}

.chapter-container {
  padding: 10px;
}

.chapter {
  margin-bottom: 10px;
}

.sub-chapter {
  cursor: pointer;
  margin-left: 20px;
  margin-bottom: 5px;
}
.avatar {
  width: 178px; /* 设置宽度 */
  height: 178px; /* 设置高度 */
  display: block;
  object-fit: cover; /* 保持图片比例并裁剪 */
}
</style>